<template>
    <a-space>

        <a-button @click="loadData" type="primary" :loading="loadDataLoading"
            preIcon="lets-icons:search-alt">查询</a-button>

        <a-button @click="flushStock" type="primary" v-auth="'slt:tmstock:flushstock'" :loading="flushStockLoading"
            preIcon="lets-icons:circle-right" color="warning">更新库存</a-button>
    </a-space>
    <div>
        <vxe-grid ref="gridRef" v-bind="gridOptions">

            <template #empty>
                <span style="color: red;">
                    <img src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif">
                    <p>没有更多数据了，请先点击查询！</p>
                </span>
            </template>

        </vxe-grid>
    </div>
</template>

<script lang="ts" setup>
import { ref,reactive, onMounted } from 'vue'
import type { VxeGridInstance, VxeGridProps, VxeColumnPropTypes } from 'vxe-table'
import { list, listAsync, flushstock } from './TmStockList.api';
interface RowVO {
    id: number
    mainouterid: string
    title: String
    totalavailablestocksum: number
    totallockstock: number
    totalavailablestock: number
}
 
const flushStockLoading = ref(false);
const loadDataLoading = ref(false);


const gridRef = ref<VxeGridInstance<RowVO>>()
const nameFilterRender = reactive<VxeColumnPropTypes.FilterRender>({
    name: 'VxeInput'
})
const gridOptions = reactive<VxeGridProps<RowVO>>({
    border: true,
    stripe: true,
    loading: false,
    height: 800,
    maxHeight: 1600,
    loadingConfig: { icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' },
    columnConfig: {
        resizable: true
    },
    rowConfig: {
        isHover: true
    },
    checkboxConfig: {
        labelField: 'id',
        highlight: true,
        range: true
    },
    filterConfig: {
        showIcon: true
    },
    columns: [
        { type: 'seq', width: 70 },
        { field: 'mainouterid', title: 'spc_code', filters: [{ data: '' }], filterRender: nameFilterRender, headerAlign: 'center', align: 'center' },
        { field: 'title', title: '商品名称', showOverflow: true, headerAlign: 'center', align: 'left' },
        { field: 'totalavailablestocksum', title: '实际总库存数', headerAlign: 'center', align: 'center' },
        { field: 'totallockstock', title: '实际锁定库存', headerAlign: 'center', align: 'center' },
        { field: 'totalavailablestock', title: '实际可用库存', headerAlign: 'center', align: 'center' }, 
    ],
    data: []
})


async function loadData() {
    //dataSource.value.push(listAsync(1));
    gridOptions.loading = true;
    loadDataLoading.value = true;
    await listAsync(1).then((result) => {
            gridOptions.loading = false;
            gridOptions.data = result;
            loadDataLoading.value = false;
        }
    );

}

async function flushStock() {
    gridOptions.data = [];
    flushStockLoading.value = true;
    await flushstock().then(() => {
        flushStockLoading.value = false;
        loadData();
    }
    );

}

 

</script>